<template>
	<view class="conn">
		<navbox title="个人中心"></navbox>
		<view class="con" @click="updateuser()" :style="{'background-image': 'url('+settting+')' }" >
			<view class="left">
				<image :src="user.picUrl">
				</image>
			</view>
			<view>
				<view class="right">
					<u-icon name="account" color="#2979ff" size="28"></u-icon>
					<view> {{user.nickName}}</view>
				</view >
				<view style="display: flex;align-items: center;" @click="ediTab()">
					<u-icon name="edit-pen" color="#a3a3a3" size="28"></u-icon>
					<view style="font-size: 13px;color: gray;">{{tab===''||tab===null?'快去设置个性签吧':tab}}</view>
				</view>

			</view>

		</view>
		<view style="background-color: #fff;">
			<swiper :indicator-dots="true" class="swiper" style="height: 400rpx;">
				<swiper-item>
					<u-grid :border="true" col="4">
						<u-grid-item v-for="(item, index) in swiperList" :index="index" :key="index">
							<u-icon :customStyle="{paddingTop:40+'rpx'}" :name="item" :size="35"></u-icon>
							<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
						</u-grid-item>
					</u-grid>
				</swiper-item>
				<swiper-item>
					<u-grid :border="true" col="4">
						<u-grid-item v-for="(item, index) in swiperList" :index="index + 9" :key="index">
							<u-icon :customStyle="{paddingTop:40+'rpx'}" :name="item" :size="35"></u-icon>
							<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
						</u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper>
		</view>
		<view style="margin-top: 30rpx;border-radius: 10px;background-color: #fff;">
			<view class="extra" style="display: flex;align-items: center;">
				<u-icon color="#479aff" slot="icon" size="32" name="question"></u-icon>
				<button open-type="feedback" class="item icon-arrow">问题反馈</button>
			</view>
			<u-cell-group>
				<u-cell title="合作勾搭" value="17547673089" isLink>
					<u-icon color="#ff6123" slot="icon" size="32" name="coupon"></u-icon>
				</u-cell>
				<u-cell title="技术支持" value="17547673089" isLink>
					<u-icon color="#ffffae" slot="icon" size="32" name="bell"></u-icon>
				</u-cell>
				<u-cell title="联系地址"   isLink  url="/pagesa/contact/contact">
					<u-icon color="#cdffbb" slot="icon" size="32" name="bookmark" ></u-icon>
				</u-cell>
				<u-cell title="退出登录" value="当前版本v1.0.0" isLink @click="back()">
					<u-icon color="#e9c5ff" slot="icon" size="32" name="calendar"></u-icon>
				</u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import navbox from '../components/navbox/navbox.vue'
	export default {
		data() {
			return {
				settting:uni.getStorageSync("settings").sideBack,
				tab:uni.getStorageSync("user").userTab,
				swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'integral', 'kefu-ermai', 'coupon', 'gift'],
				user: {}
			};
		},
		methods: {
			ediTab(){
				uni.navigateTo({
					url:'/pagesa/ediTab/ediTab'
				})
			},
			back() {
				uni.showModal({
					title: '提示',
					content: '确认退出吗？',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync("token")
							uni.removeStorageSync("user")
							uni.removeStorageSync("settings")
							uni.reLaunch({
								url: '/pages/login/login'
							})
						} else if (res.cancel) {}
					}
				});
			},
			updateuser() {
				uni.navigateTo({
					url: '/pagesa/updateuser/updateuser'
				})
			}
		},
		onLoad(option) {
			this.user = uni.getStorageSync("user")
		},
		components: {
			"navbox": navbox
		},
	};
</script>

<style lang="scss">
	.extra {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 4rpx;

		.item {
			margin-left: -10rpx;
			line-height: 1;
			padding: 25rpx 0 25rpx 20rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 30rpx;
			color: #333;
		}

		button {
			text-align: left;
			background-color: #fff;

			&::after {
				border: none;
				border-radius: 0;
			}
		}
	}

	.icon-arrow {
		position: relative;

		&::before {
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
		}
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.conn {
		background-color: #f7f7f7;

		.con {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f4f4f4;
			width: 100%;
			height: 450rpx;
			// background-image: url("https://img0.baidu.com/it/u=63854044,1887424735&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=300");
			background-size: cover;

			.left {
				width: 26%;

				image {
					border-radius: 5px;
					margin-top: 188rpx;
					margin-left: 0rpx;
					width: 150rpx;
					height: 150rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-left: 0rpx;
				margin-top: 168rpx;
				font-size: 25px;
				font-weight: 500;
			}
		}

	}
</style>
